<!-- 关联案件 -->
<template>
	<view class="card d-flex">
		<view class="card_head relative d-flex mb-30">
			<text class="card_head_title relative">关联案件扫描</text>
		</view>

		<view class="card_content d-flex">

			<view class="card_item d-flex">
				<view class="card_item_head d-flex mb-50">
					<text class="card_item_head_title bold relative">关联案件统计</text>
				</view>

				<view class="echarts">
					<qiun-data-charts :radius="[0.1, 0.8]" type="ring" :opts="opts" :chartData="chartData" />
				</view>
			</view>
			
			<!-- 民事案件 -->
			<view v-for="(item, index) of list" :class="['card_item d-flex', index !== list.length - 1 ? 'mb-40' : '']" :key="index">
				<view class="card_item_head d-flex mb-50">
					<text class="card_item_head_title bold relative">{{ item.name }}</text>
				</view>

				<view v-for="(i, j) of item.list" :class="['jc', j !== item.list.length - 1]" :key="j">
					<view class="jc_head d-flex">
						<text class="jc_item">案号：{{ i.c_ah }}</text>

						<view class="menu" :style="{transform: menu ? 'rotateZ(0deg)' : 'rotateZ(180deg)'}" @click="i.menu = !i.menu">
							<Icon :style="{transform: menu ? 'rotateZ(0deg)' : 'rotateZ(180deg)'}" class="menu_icon"
								name="arrow-up" color="#6642EA" size="22rpx" />
						</view>
					</view>

					<view class="case" :style="{maxHeight: i.menu ? '400rpx' : 0, marginTop: i.menu ? '30rpx' : 0}">
						<view class="jc_msg d-flex">
							<text class="jc_item mb-10">案件类型：{{ i.n_ajlx }}</text>
							<text class="jc_item mb-10">法院名称：{{ i.n_jbfy }}</text>
							<text class="jc_item mb-10">立案时间：{{ i.d_larq }}</text>
							<!-- <text class="jc_item mb-10">审结/判决时间：2023年**月**日</text> -->
							<text class="jc_item mb-10">结案时间：{{ i.d_jarq }}</text>
							<text class="jc_item mb-10">案由：{{ i.n_laay }}</text>
							<text class="jc_item mb-10">案件状态：{{ i.n_ajjzjd }}</text>
							<!-- <text class="jc_item mb-10">内容摘要：***********************</text> -->
							<!-- <text class="jc_item mb-10">依据：**************</text> -->
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted,
		nextTick,
		defineProps,
		watch
	} from 'vue'
	import Icon from '@/components/Icon/index.vue';

	const menu = ref(false)

	const chartData = ref({});

	const props = defineProps({
		info: {
			type: Object,
			default: () => {}
		}
	})
	
	const opts = ref({
		color: ["#5AA5FD", "#FF6C67", "#727BFC", "#41BF47", "#3ED0FF", "#FFDFA4"],
		padding: [5, 5, 5, 5],
		enableScroll: false,
		title: {
			name: "关联案件数",
			fontSize: 13,
			color: "#404040"
		},
		subtitle: {
			name: "6",
			fontSize: 12,
			color: "#7cb5ec"
		},
		extra: {
			ring: {
				activeOpacity: 0.1,
				ringWidth: 10,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 2,
				border: false
			}
		}
	})
	
	const list = ref([])
	watch(() => props.info, (newValue, oldValue) => {
		if (!newValue) return
		let res = {
			series: [{
				data: [{
					"name": "民事案件",
					"value": newValue.civil?.count || 0,
					"labelShow": false
				},{
					"name": "刑事案件",
					"value": newValue.criminal?.count || 0,
					"labelShow": false
				},{
					"name": "行政案件",
					"value": newValue.administrative?.count || 0,
					"labelShow": false
				},{
					"name": "非诉保全审查",
					"value": newValue.preservation?.count || 0,
					"labelShow": false
				},{
					"name": "执行案件",
					"value": newValue.implement?.count || 0,
					"labelShow": false
				},{
					"name": "强制清算与破产案件",
					"value": newValue.bankrupt?.count || 0,
					"labelShow": false
				}]
			}]
		};
		let number = 0
		for (let i in newValue) {
			number += newValue[i]?.count || 0;
			
			list.value.push({
				name: {
					civil: '民事案件',
					criminal: '刑事案件',
					administrative: '行政案件',
					preservation: '非诉保全审查',
					implement: '执行案件',
					bankrupt: '强制清算与破产案件',
				}[i],
				list: newValue[i]?.case
			})
		}
		opts.value.subtitle.name = number
		nextTick(() => {
			chartData.value = JSON.parse(JSON.stringify(res));
		})
	})
</script>

<style lang="scss" scoped>
	.card {
		flex-direction: column;

		&_content {
			flex-direction: column;
		}

		&_item {
			width: 100%;
			flex-direction: column;

			&_head {
				align-items: center;
				justify-content: space-between;

				&_title {
					padding-left: 30rpx;
					color: #000;

					font: {
						size: 24rpx;
					}

					&:before {
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						height: 110%;
						width: 6rpx;
						background-color: #6642EA;
						border-radius: 8rpx;
					}
				}

				&_describe {
					color: #6C7282;

					font: {
						size: 24rpx
					}
				}
			}

			.jc {
				padding: 30rpx 25rpx;
				background: linear-gradient(to right, #F4F6FF, #FEF5F8);
				border-radius: 26rpx;

				&_head {
					align-items: center;
					justify-content: space-between;

					.menu {
						align-items: center;
						color: #6642EA;

						font: {
							size: 25rpx
						}

						&_icon {
							transition: .3s;
							padding: 3rpx;
							border-radius: 50%;
							border: 1px solid #6642EA;
						}
					}
				}

				&_item {
					color: #6C7282;

					font: {
						size: 25rpx
					}
				}

				&_msg {
					flex-direction: column;
				}
			}
		}
	}

	.echarts {
		width: 100%;
		height: 400rpx;
	}
	
	.case {
		overflow: hidden;
		transition: .3s
	}
</style>